<template>
  <view class="box">
    <view class="search">
      <u-search
        :focus="true"
        placeholder="请输入关键字"
        margin="20rpx"
        @search="query"
        @custom="query"
        v-model="params.query"
      ></u-search>
    </view>
    <view class="goods_list">
      <view class="goods_item" v-for="item in goodsList" :key="item.goods_id">
        <view class="image">
          <u-image
            mode="aspectFit"
            height="191rpx"
            :src="item.goods_small_logo"
          ></u-image>
        </view>
        <view class="goodInfo">
          <view class="title u-line-2">{{ item.goods_name }}</view>
          <view class="price">￥{{ item.goods_price }}</view>
        </view>
      </view>
    </view>
    <view v-if="goodsList.length && goodsList.length >= total" class="footer">
      没有更多宝贝了
    </view>

    <u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        query: "",
        pagenum: 1,
        pagesize: 20,
      },
      total: 0,
      goodsList: [],
      scrollTop: 0,
    };
  },
  methods: {
    async query(type) {
      if (!this.params.query) {
        uni.showToast({
          title: "请输入内容",
          icon: "none",
        });
        return;
      }
      //type表示触底刷新，没有则是用户重新搜索
      if (type !== "onBottom") {
        this.goodsList = [];
        this.params = {
         ...this.params,
         pagenum: 1,
        pagesize: 20,
        };
      }

      const res = await this.$u.http.get("/goods/search", this.params);
      const { goods, total } = res;
      this.goodsList = [...this.goodsList, ...goods];
      this.total = total;
      if (!this.total) {
        uni.showToast({
          title: "没有找到宝贝！换个姿势试试",
          icon: "none",
        });
      }
    },
  },
  onReachBottom() {
    if (this.goodsList.length >= this.total) {
      return;
    }
    this.params.pagenum++;
    this.query("onBottom");
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
};
</script>

<style lang="scss">
.search {
    background-color: #fff;
  ::v-deep .u-action {
    width: 100rpx;
    height: 60rpx;
    color: #fff !important;
    line-height: 60rpx;
    background-color: #ea4350;
    border-radius: 8rpx;
  }
}
.goods_list {
  .goods_item {
    display: flex;
    padding: 10rpx 26rpx;
    .image {
      flex: 1;
      padding: 0 10rpx;
    }
    .goodInfo {
      flex: 2;
      display: flex;
      padding: 20rpx 0;
      flex-direction: column;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      .price {
        color: $theme-color;
      }
    }
  }
}
.footer {
  line-height: 80rpx;
  color: #ccc;
  text-align: center;
}

</style>